<template>
  <common-card title="累计用户数" value="1,087,503">
    <template>
      <v-chart ref="creditChart" :options="getOptions()" />
      <!-- <div id="total-users-chart" style="width:100%;height:100%"></div> -->
    </template>
    <template v-slot:footer>
      <div class="total-users-footer">
        <span>日同比</span>
        <span class="emphasis">8.73%</span>
        <div class="increase" />
        <span class="month">月同比</span>
        <span class="emphasis">35.91%</span>
        <div class="decrease" />
      </div>
    </template>
  </common-card>
</template>
<script>
import commonCardMixin from '../../mixins/commonCardMixin'
import resize from '../../mixins/resize'
export default {
  mixins: [commonCardMixin, resize],
  mounted() {
    // const chartDom = document.getElementById("total-users-chart");
    // const chart = this.$echarts.init(chartDom);
    // chart.setOption({
    //   grid: {
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0,
    //   },
    //   xAxis: {
    //     type: "value",
    //     show: false,
    //   },
    //   yAxis: {
    //     type: "category",
    //     show: false,
    //   },
    //   series: [
    //     {
    //       type: "bar",
    //       data: [200],
    //       barWidth: 10,
    //       stack: "总量",
    //       itemStyle: {
    //         color: "#45c946",
    //       },
    //     },
    //     {
    //       type: "bar",
    //       data: [250],
    //       stack: "总量",
    //       itemStyle: {
    //         color: "#eee",
    //       },
    //     },
    //     {
    //       type: "custom",
    //       stack: "总量",
    //       data: [200],
    //       renderItem: (params, api) => {
    //         // 获取位置 200
    //         const value = api.value(0);
    //         // 获取坐标轴
    //         const endPoint = api.coord([value, 0]);
    //         return {
    //           type: "group",
    //           position: endPoint,
    //           children: [
    //             {
    //               type: "path",
    //               shape: {
    //                 d:
    //                   "M344.189719 297.542353l-57.889397-57.889397-48.231443 48.232466 57.889397 57.889397L344.189719 297.542353zM254.129654 480.812217l-96.462886 0L157.666768 545.103411l96.462886 0L254.129654 480.812217zM543.518311 162.503932l-64.291194 0 0 93.214915 64.291194 0L543.518311 162.503932zM784.677572 287.885422l-48.231443-48.232466-57.89042 57.889397 45.031568 45.027474L784.677572 287.885422zM678.555709 728.42137l57.89042 57.841302 45.07557-44.982449-57.934423-57.885304L678.555709 728.42137zM768.614751 545.103411l96.464932 0 0-64.291194-96.464932 0L768.614751 545.103411zM511.397785 320.009018c-106.116747 0-192.926795 86.855073-192.926795 192.927818 0 106.113677 86.810048 192.923725 192.926795 192.923725 106.11777 0 192.923725-86.810048 192.923725-192.923725C704.32151 406.864091 617.515555 320.009018 511.397785 320.009018M479.227117 863.459791l64.291194 0 0-93.259941-64.291194 0L479.227117 863.459791zM238.068879 738.030205l48.231443 48.231443 57.889397-57.841302-44.982449-45.027474L238.068879 738.030205z",
    //                 x: -7.5,
    //                 y: -25,
    //                 width: 15,
    //                 height: 15,
    //                 layout: "cover",
    //               },
    //               style: {
    //                 fill: "#e14d3a",
    //               },
    //             },
    //             {
    //               type: "path",
    //               shape: {
    //                 d:
    //                   "M1080.270639 453.733718c-77.161903 88.184889-214.58473 234.425705-214.58473 234.425705s22.045972 160.203798 35.273956 269.70066c5.878993 55.85193-37.478953 80.101899-85.980892 58.054927-92.594883-43.357945-233.690706-110.96686-265.290665-126.399841-32.334959 14.697981-174.165781 81.571897-267.495663 124.928843-49.236938 21.310973-92.594883-2.204997-87.45089-58.054927 12.492984-109.496862 35.273956-268.965661 35.273955-268.965661S91.123885 541.917607 13.227983 453.732718c-27.924965-32.334959-9.551988-77.896902 44.827944-85.980891 111.701859-19.841975 284.397642-51.441935 284.397642-51.441935s94.798881-163.143794 154.324805-263.086669C529.848333-7.7717 552.629304-0.422709 556.304299 1.047289c10.287987 2.939996 26.455967 15.431981 47.032941 52.175934 58.789926 99.943874 152.119808 263.087669 152.119808 263.087669s170.491785 31.60096 280.723647 51.441935c53.645932 8.08399 71.28291 54.380931 44.092944 85.980891z",
    //                 x: -5,
    //                 y: 10,
    //                 width: 10,
    //                 height: 10,
    //                 layout: "cover",
    //               },
    //               style: {
    //                 fill: "#e2a770",
    //               },
    //             },
    //           ],
    //         };
    //       },
    //     },
    //   ],
    // });
  },
  methods: {
    getOptions() {
      return {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false
        },
        series: [
          {
            type: 'bar',
            data: [200],
            barWidth: 10,
            stack: '总量',
            itemStyle: {
              color: '#45c946'
            }
          },
          {
            type: 'bar',
            data: [250],
            stack: '总量',
            itemStyle: {
              color: '#eee'
            }
          },
          {
            type: 'custom',
            stack: '总量',
            data: [200],
            renderItem: (params, api) => {
              // 获取位置 200
              const value = api.value(0)
              // 获取坐标轴
              const endPoint = api.coord([value, 0])

              return {
                type: 'group',
                position: endPoint,
                children: [
                  {
                    type: 'path',
                    shape: {
                      d:
                        'M344.189719 297.542353l-57.889397-57.889397-48.231443 48.232466 57.889397 57.889397L344.189719 297.542353zM254.129654 480.812217l-96.462886 0L157.666768 545.103411l96.462886 0L254.129654 480.812217zM543.518311 162.503932l-64.291194 0 0 93.214915 64.291194 0L543.518311 162.503932zM784.677572 287.885422l-48.231443-48.232466-57.89042 57.889397 45.031568 45.027474L784.677572 287.885422zM678.555709 728.42137l57.89042 57.841302 45.07557-44.982449-57.934423-57.885304L678.555709 728.42137zM768.614751 545.103411l96.464932 0 0-64.291194-96.464932 0L768.614751 545.103411zM511.397785 320.009018c-106.116747 0-192.926795 86.855073-192.926795 192.927818 0 106.113677 86.810048 192.923725 192.926795 192.923725 106.11777 0 192.923725-86.810048 192.923725-192.923725C704.32151 406.864091 617.515555 320.009018 511.397785 320.009018M479.227117 863.459791l64.291194 0 0-93.259941-64.291194 0L479.227117 863.459791zM238.068879 738.030205l48.231443 48.231443 57.889397-57.841302-44.982449-45.027474L238.068879 738.030205z',
                      x: -7.5,
                      y: -25,
                      width: 15,
                      height: 15,
                      layout: 'cover'
                    },
                    style: {
                      fill: '#e14d3a'
                    }
                  },
                  {
                    type: 'path',
                    shape: {
                      d:
                        'M1080.270639 453.733718c-77.161903 88.184889-214.58473 234.425705-214.58473 234.425705s22.045972 160.203798 35.273956 269.70066c5.878993 55.85193-37.478953 80.101899-85.980892 58.054927-92.594883-43.357945-233.690706-110.96686-265.290665-126.399841-32.334959 14.697981-174.165781 81.571897-267.495663 124.928843-49.236938 21.310973-92.594883-2.204997-87.45089-58.054927 12.492984-109.496862 35.273956-268.965661 35.273955-268.965661S91.123885 541.917607 13.227983 453.732718c-27.924965-32.334959-9.551988-77.896902 44.827944-85.980891 111.701859-19.841975 284.397642-51.441935 284.397642-51.441935s94.798881-163.143794 154.324805-263.086669C529.848333-7.7717 552.629304-0.422709 556.304299 1.047289c10.287987 2.939996 26.455967 15.431981 47.032941 52.175934 58.789926 99.943874 152.119808 263.087669 152.119808 263.087669s170.491785 31.60096 280.723647 51.441935c53.645932 8.08399 71.28291 54.380931 44.092944 85.980891z',
                      x: -5,
                      y: 10,
                      width: 10,
                      height: 10,
                      layout: 'cover'
                    },
                    style: {
                      fill: '#e2a770'
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<style scoped lang="scss">
.total-users-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
}
</style>
<svg
  t="1595833881140"
  class="icon"
  viewBox="0 0 1092 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="5779"
  width="200"
  height="200"
><path d="M1080.270639 453.733718c-77.161903 88.184889-214.58473 234.425705-214.58473 234.425705s22.045972 160.203798 35.273956 269.70066c5.878993 55.85193-37.478953 80.101899-85.980892 58.054927-92.594883-43.357945-233.690706-110.96686-265.290665-126.399841-32.334959 14.697981-174.165781 81.571897-267.495663 124.928843-49.236938 21.310973-92.594883-2.204997-87.45089-58.054927 12.492984-109.496862 35.273956-268.965661 35.273955-268.965661S91.123885 541.917607 13.227983 453.732718c-27.924965-32.334959-9.551988-77.896902 44.827944-85.980891 111.701859-19.841975 284.397642-51.441935 284.397642-51.441935s94.798881-163.143794 154.324805-263.086669C529.848333-7.7717 552.629304-0.422709 556.304299 1.047289c10.287987 2.939996 26.455967 15.431981 47.032941 52.175934 58.789926 99.943874 152.119808 263.087669 152.119808 263.087669s170.491785 31.60096 280.723647 51.441935c53.645932 8.08399 71.28291 54.380931 44.092944 85.980891z" fill="" p-id="5780"></path></svg>
<svg
  t="1595833916382"
  class="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="8083"
  width="200"
  height="200"
><path d="M344.189719 297.542353l-57.889397-57.889397-48.231443 48.232466 57.889397 57.889397L344.189719 297.542353zM254.129654 480.812217l-96.462886 0L157.666768 545.103411l96.462886 0L254.129654 480.812217zM543.518311 162.503932l-64.291194 0 0 93.214915 64.291194 0L543.518311 162.503932zM784.677572 287.885422l-48.231443-48.232466-57.89042 57.889397 45.031568 45.027474L784.677572 287.885422zM678.555709 728.42137l57.89042 57.841302 45.07557-44.982449-57.934423-57.885304L678.555709 728.42137zM768.614751 545.103411l96.464932 0 0-64.291194-96.464932 0L768.614751 545.103411zM511.397785 320.009018c-106.116747 0-192.926795 86.855073-192.926795 192.927818 0 106.113677 86.810048 192.923725 192.926795 192.923725 106.11777 0 192.923725-86.810048 192.923725-192.923725C704.32151 406.864091 617.515555 320.009018 511.397785 320.009018M479.227117 863.459791l64.291194 0 0-93.259941-64.291194 0L479.227117 863.459791zM238.068879 738.030205l48.231443 48.231443 57.889397-57.841302-44.982449-45.027474L238.068879 738.030205z" p-id="8084"></path></svg>
